<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
  </head>
  <body>
    <div id="app">
      <div class="grid">
        <div>
          <h1>图书管理</h1>
          <div class="book">
            <div>
              <label for="id">
                编号：
              </label>
              <input
                type="text"
                id="id"
                v-model="id"
                disabled="false"
                v-focus
              />
              <label for="name">
                名称：
              </label>
              <input type="text" id="name" v-model="name" />
              <button  @click=handle :disabled="flag">提交</button>
            </div>
          </div>
        </div>
        <div class="total">
          <span>图书总数：</span>
          <span>{{total}}</span>
        </div>
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>名称</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr :key="item.id" v-for="item in books">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
              <td>
                <a href=""  @click.prevent='toEdit(item.id)'>修改</a>
                <span>|</span>
                <a href=""  @click.prevent='del(item.id)'>删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
      /*
      图书管理-添加图书
    */
      axios.defaults.baseURL = "http://localhost:3000/";
      axios.interceptors.response.use(
        function (res) {
          return res.data;
        },
        function (error) {
          console.log(error);
        }
      );
      Vue.directive("focus", {
        inserted: function (el) {
          el.focus();
        },
      });
    // 时间过滤器
      Vue.filter("format", function (value, arg) {
        function dateFormat(date, format) {
          if (typeof date === "string") {
            var mts = date.match(/(\/Date\((\d+)\)\/)/);
            if (mts && mts.length >= 3) {
              date = parseInt(mts[2]);
            }
          }
          date = new Date(date);
          if (!date || date.toUTCString() == "Invalid Date") {
            return "";
          }
          var map = {
            M: date.getMonth() + 1, //月份
            d: date.getDate(), //日
            h: date.getHours(), //小时
            m: date.getMinutes(), //分
            s: date.getSeconds(), //秒
            q: Math.floor((date.getMonth() + 3) / 3), //季度
            S: date.getMilliseconds(), //毫秒
          };
          format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
            var v = map[t];
            if (v !== undefined) {
              if (all.length > 1) {
                v = "0" + v;
                v = v.substr(v.length - 2);
              }
              return v;
            } else if (t === "y") {
              return (date.getFullYear() + "").substr(4 - all.length);
            }
            return all;
          });
          return format;
        }
        return dateFormat(value, arg);
      });
      var vm = new Vue({
        el: "#app",
        data: {
          books: [],
          name:"",
          id:"",
          flag:false
        },
        methods: {
          handle: async function () {
            if(this.id){
              //编辑图书提交
              console.log(123);
              let res=await axios.put("books/"+this.id, {name:this.name})
              console.log(res);
              if(res.status==200){
                this.id=""
            this.name=""
                this.getData()
             
              }
            }else{
              // 添加图书
              let res=await axios.post("books", {name:this.name})
              if(res.status==200){
                this.name=""
                this.getData
                this.getData()
              }

            }
          },
          toEdit: async function (id) {
            let res=await axios.get("books/"+id)
            console.log(res);
             
            this.id=res.id
            this.name=res.name
            
          },
          getData: async function () {
            //渲染页面
            this.books=await axios.get("books")
          },
          async del(id){
             let res=await axios.delete("books/"+id)
             if(res.status==200){
               this.getData()
             }

          }
        },
        computed: {
          total(){
            return this.books.length
          }
        },
        watch: {
          async name(){
            let res=await axios.get("books/book/"+this.name)
            if(res.status==1){
              this.flag=true
            }else{
              this.flag=false
            }
          }
        },
        mounted: function () {
          this.getData()
        },
      });
    </script>
  </body>
</html>
